<template>
    <div style="background-color: #E4E7ED">
        <div style="padding-left:200px;padding-top:50px;padding-right:200px">
            <el-row style="padding-right:200px">
                <el-col :span="8">
                    <div class="demo-image" style="padding-left:50%">
                        <img src="@/assets/warren_market.png" style="width: 240px; height: 180px">
                    </div>
                </el-col>
                <el-col :span="8" style="padding-top:4%">
                    <div class="demo-input-suffix" style="padding-left:50px">
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" style="width:600px">
                            <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button> <!--将文本内容输出到data里的input中 这个button绑定方法获取input数据进行axios-->
                        </el-input>
                    </div>
                </el-col>
            </el-row >
            <div style="border-radius: 4px;background-color:#C0C4CC;height:70px;margin-bottom:20px">
                <p style="padding-left:20px;padding-top:10px">品牌：</p>

                <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left:100px" v-if="this.$route.query.category == 'phone'">
                    <el-link @click="ChangeBrand('apple')">Apple</el-link>
                    <el-link @click="ChangeBrand('realme')" style="margin-left:20px">Realme</el-link>
                    <el-link @click="ChangeBrand('iqoo')" style="margin-left:20px">IQOO</el-link>
                    <el-link @click="ChangeBrand('黑鲨')" style="margin-left:20px">黑鲨</el-link>
                    <el-link @click="ChangeBrand('华为')" style="margin-left:20px">华为</el-link>
                    <el-link @click="ChangeBrand('oppo')" style="margin-left:20px">OPPO</el-link>
                    <el-link @click="ChangeBrand('vivo')" style="margin-left:20px">VIVO</el-link>
                </el-breadcrumb>

                <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left:100px" v-if="this.$route.query.category == 'computer'">
                    <el-link @click="ChangeBrand('hasee')">Hasee</el-link>
                    <el-link @click="ChangeBrand('外星人')" style="margin-left:20px">外星人</el-link>
                    <el-link @click="ChangeBrand('华为')" style="margin-left:20px">华为</el-link>
                    <el-link @click="ChangeBrand('华硕')" style="margin-left:20px">华硕</el-link>
                    <el-link @click="ChangeBrand('小米')" style="margin-left:20px">小米</el-link>
                    <el-link @click="ChangeBrand('联想')" style="margin-left:20px">联想</el-link>
                    <el-link @click="ChangeBrand('rog')" style="margin-left:20px">ROG</el-link>
                </el-breadcrumb>

                <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left:100px" v-if="this.$route.query.category == 'table_computer'">
                    <el-link @click="ChangeBrand('apple')">Apple</el-link>
                    <el-link @click="ChangeBrand('小米')" style="margin-left:20px">小米</el-link>
                    <el-link @click="ChangeBrand('华为')" style="margin-left:20px">华为</el-link>
                    <el-link @click="ChangeBrand('微软')" style="margin-left:20px">微软</el-link>
                    <el-link @click="ChangeBrand('联想')" style="margin-left:20px">联想</el-link>
                </el-breadcrumb>

            </div>
            <el-row :gutter="20" style="background-color:#FFFFFF">
                <el-col :span="6" v-for="product in tableData" :key="product" style="padding-left:50px;margin-bottom:20px">
                    <div class="grid-content bg-purple" style="padding-top:20px">
                        <router-link :to="'/detail?category='+product.category+'&id='+product.id" style="color:black">
                            <img :src="require('@/assets/'+product.category+'/'+product.id+'/1.jpg')" style="width: 200px; height: 200px"><br>
                            <p style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px">{{product.title}}</p>
                            <el-row :gutter="20" style="padding-top:10px">
                                <el-col :span="6"><div class="grid-content bg-purple"><p style="color:#D69C1F">￥{{product.price}}</p></div></el-col>
                                <el-col :span="18"><div class="grid-content bg-purple"><p style="padding-left:10px">{{product.buyer}}人购买</p></div></el-col>
                            </el-row>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
                <div class="block" style="padding-top:20px;padding-left:860px;margin-bottom:20px">
                    <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total=total>
                    </el-pagination>
                </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"categorypage",
    data(){
         return{
             input: '',
             brand: '',
             tableData: [],
             total : 100
         }
     },
     methods: {
      handleCurrentChange(val) {
        if (this.brand != ''){
            this.$axios.get("/api/getShowProduct?brand="+this.brand+"&category="+this.$route.query.category+"&page="+val).then(res=>{
                this.tableData = res.data
            });
        }else{
            this.$axios.get("/api/getShowCategory?category="+this.$route.query.category+"&page="+val).then(res=>{
                this.tableData = res.data
            });
        }
      },
      ChangeBrand(brand) {
        this.brand = brand;
        this.$axios.get("/api/getShowProduct?brand="+brand+"&category="+this.$route.query.category+"&page=1").then(res=>{
            this.tableData = res.data
        });
        this.$axios.get("/api/getCountProduct?brand="+brand+"&category="+this.$route.query.category).then(res=>{
            this.total = res.data
        });
      },
      handleClick() {
        this.$router.push("/productsshow?title="+this.input)
      }
    },
    mounted(){
        this.$axios.get("/api/getShowCategory?category="+this.$route.query.category+"&page=1").then(res=>{
            console.log(res);
            this.tableData = res.data
        });
        this.$axios.get("/api/getCountCategory?category="+this.$route.query.category).then(res=>{
            this.total = res.data
        });
    }
}
</script>

<style>
    a{
        text-decoration: none;
    }
    .router-link{
        text-decoration: none;
    }
</style>